import React, { Component } from "react";
import { Link }from 'react-router-dom';
import { Breadcrumb  } from 'antd';

//具体导航的名称
let breadcrumbNameMap = {
    '/raycloud/domain':'域名管理',
    '/raycloud/domain/public':'外网',
    '/raycloud/domain/inner':'内网',
    '/raycloud/domain/details/:domain_name':'域名信息',
}

class NewBreadcrumb extends Component {    
    constructor(props) {
        super(props);
        this.state={
            pathSnippets: null,
            extraBreadcrumbItems: null,
        }
    }
    getPath = () => {
        //对路径进行切分，存放到this.state.pathSnippets中
        this.state.pathSnippets = this.props.pathname.split('/').filter(i => i);
        // let arr=this.state.pathSnippets;
        // let pathname=this.context.router.history.location.pathname;
        //将切分的路径读出来，形成面包屑，存放到this.state.extraBreadcrumbItems
        this.state.extraBreadcrumbItems = this.state.pathSnippets.map((_, index) => {
            let url = `/${this.state.pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>
                        {breadcrumbNameMap[url]}
                    </Link>
                </Breadcrumb.Item>
            );
        });
    }
    componentWillMount() {
        console.log(this.props)
        this.getPath();
    }

    render() {
        return <Breadcrumb style={{ margin: '16px 0 0 7px' }}>
                    {this.state.extraBreadcrumbItems}
               </Breadcrumb>;
    }
}

export default NewBreadcrumb;